@use "sass:map";

$breakpoints: (
  sm: 40rem,
  md: 48rem,
  lg: 64rem,
  xl: 80rem,
  2xl: 96rem,
);

@function _get-breakpoint($bp) {
  @if not map.has-key($breakpoints, $bp) {
    @error "Invalid breakpoint: #{$bp}";
  }

  @return map.get($breakpoints, $bp);
}

@mixin from($bp) {
  @media (width >= #{_get-breakpoint($bp)}) {
    @content;
  }
}

@mixin until($bp) {
  @media (width < #{_get-breakpoint($bp)}) {
    @content;
  }
}

@mixin between($from, $until) {
  @media (#{_get-breakpoint($from)} <= width < #{_get-breakpoint($until)}) {
    @content;
  }
}
